<template>
	<Card :style="{ paddingTop: '34rpx', paddingBottom: '28rpx' }">
		<view>
			<view class="head" @click="gotoDetail(data?.id)">
				<view class="name-wrap">
					<view class="name">{{data?.shop_name}}</view>
					<view>{{dateFormat(data?.createtime, 'yyyy-MM-dd hh:mm:ss')}}</view>
				</view>
				<view class="status">{{ tabs[data?.status] }}</view>
			</view>

			<view class="body" @click="gotoDetail(data?.id)">
				<image :src="BASE_OSS_URL + data?.goods_image" />
				<view class="details">
					<view class="subname">{{ data?.goods_name }}</view>
					<view class="block">
						<view>
							<text>数量：</text>
							<text>{{ data?.number }}</text>
						</view>
						<view>
							<text>总价：</text>
							<text class="price">{{ data?.price }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="footer">
				<template v-if="data?.status === OrderStatus.UNPAID">
					<AButton round :style="{ marginRight: '22rpx' }" @click="cancelOrderFn({order_id: data?.id})">取消订单
					</AButton>
					<AButton round type="primary">立即付款</AButton>
				</template>
				<AButton v-if="data?.status === OrderStatus.VERIFIED" round type="primary">查看券码</AButton>
				<AButton v-if="data?.status === OrderStatus.UNVERIFIED" round>查看订单</AButton>
				<AButton v-if="data?.status === OrderStatus.DELIVERED" round type="primary">确认收货</AButton>
				<AButton v-if="data?.status === OrderStatus.FINISHED" round type="primary">删除订单</AButton>
				<!-- <AButton v-if="data?.status === '退款中'" round type="primary">查看进度</AButton> -->
				<AButton v-if="data?.status === OrderStatus.CANCELLED" round type="primary">查看订单</AButton>
			</view>
		</view>
	</Card>
</template>

<script setup>
	import {
		BASE_OSS_URL
	} from '@/utils/request';
	import Card from '@/components/Card/index.vue'
	import AButton from '@/components/abutton.vue'
	import {
		cancelOrder
	} from '@/service/order';
	import {
		showToast
	} from "@/utils/uniApi.js"
	import { OrderStatus } from '@/utils/constants.js'
	import { dateFormat } from '@/utils'

	const emits = defineEmits(['update'])
	defineProps(['data'])
	const gotoDetail = (id) => {
		uni.navigateTo({
			url: "/pages/order/detail/index?id=" + id,
		})
	}
	const tabs = {
		0: "全部",
		1: '待付款',
		2: '待发货',
		3: '待收货',
		4: '待核销',
		5: '待服务',
		6: '已取消',
		7: '已完成',
		8: '待服务',
	}
	const cancelOrderFn = async (data) => {
		await cancelOrder(data)
		console.log(1);
		showToast({
			title: "取消成功！"
		})
		emits("update")
	}
</script>

<style lang="scss">
	.card111 {
		background-color: #fff !important;
	}

	.head {
		display: flex;
		justify-content: space-between;
		margin-bottom: 29rpx;

		.name-wrap {
			font-size: 22rpx;

			.name {
				color: $title-color;
				font-size: 28rpx;
			}
		}

		.status {
			color: $accent-color;
			font-size: 28rpx;
		}
	}

	.body {
		display: flex;
		margin-bottom: 28rpx;

		image {
			width: 150rpx;
			height: 150rpx;
			margin-right: 25rpx;
		}

		.details {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 22rpx;
			line-height: 36rpx;

			.subname {
				font-size: 26rpx;
				line-height: 38rpx;
				color: $title-color;
			}

			.price {
				color: $accent-color;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: flex-end;
	}
</style>